<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 自定义Grid样式 */
        .grid-container {
            display: grid;
            gap: 1rem;
            padding: 1rem;
        }

        .grid-2x2 {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 200px);
        }

        .grid-3x3 {
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 150px);
        }

        .grid-responsive {
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            grid-auto-rows: 200px;
        }

        .grid-masonry {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            grid-auto-rows: 100px;
            grid-auto-flow: dense;
        }

        .grid-card {
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            grid-auto-rows: 250px;
        }

        .grid-hero {
            grid-template-columns: 2fr 1fr 1fr;
            grid-template-rows: 200px 200px;
            gap: 1rem;
        }

        .grid-hero .hero-main {
            grid-row: 1 / 3;
        }

        .grid-hero .hero-side {
            grid-column: 2 / 4;
        }

        .grid-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .grid-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }

        .card {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }

        .masonry-item {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
        }

        .masonry-item.tall {
            grid-row: span 2;
        }

        .masonry-item.wide {
            grid-column: span 2;
        }

        .masonry-item.large {
            grid-row: span 2;
            grid-column: span 2;
        }

        .hero-item {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
        }

        .hero-main {
            background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
        }

        .hero-side {
            background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
        }

        .section-title {
            font-size: 2rem;
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 1rem;
            text-align: center;
        }

        .section-description {
            text-align: center;
            color: #718096;
            margin-bottom: 2rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 页面标题 -->
    <header class="bg-white shadow-sm border-b">
        <div class="max-w-7xl mx-auto px-4 py-6">
            <h1 class="text-3xl font-bold text-gray-800 text-center">
                <i class="fas fa-th-large text-blue-500 mr-3"></i>
                CSS Grid 布局示例
            </h1>
            <p class="text-gray-600 text-center mt-2">探索现代CSS Grid布局的强大功能</p>
        </div>
    </header>

    <div class="max-w-7xl mx-auto px-4 py-8">
        <!-- 1. 基础2x2网格 -->
        <section class="mb-12">
            <h2 class="section-title">基础2x2网格</h2>
            <p class="section-description">简单的2列2行网格布局，每个网格项大小相等</p>
            <div class="grid-container grid-2x2">
                <div class="grid-item">网格项 1</div>
                <div class="grid-item">网格项 2</div>
                <div class="grid-item">网格项 3</div>
                <div class="grid-item">网格项 4</div>
            </div>
        </section>

        <!-- 2. 3x3网格 -->
        <section class="mb-12">
            <h2 class="section-title">3x3网格</h2>
            <p class="section-description">3列3行的网格布局，适合展示多个内容块</p>
            <div class="grid-container grid-3x3">
                <div class="grid-item">项目 1</div>
                <div class="grid-item">项目 2</div>
                <div class="grid-item">项目 3</div>
                <div class="grid-item">项目 4</div>
                <div class="grid-item">项目 5</div>
                <div class="grid-item">项目 6</div>
                <div class="grid-item">项目 7</div>
                <div class="grid-item">项目 8</div>
                <div class="grid-item">项目 9</div>
            </div>
        </section>

        <!-- 3. 响应式网格 -->
        <section class="mb-12">
            <h2 class="section-title">响应式网格</h2>
            <p class="section-description">使用auto-fit和minmax实现响应式布局，自动适应屏幕宽度</p>
            <div class="grid-container grid-responsive">
                <div class="grid-item">响应式 1</div>
                <div class="grid-item">响应式 2</div>
                <div class="grid-item">响应式 3</div>
                <div class="grid-item">响应式 4</div>
                <div class="grid-item">响应式 5</div>
                <div class="grid-item">响应式 6</div>
            </div>
        </section>

        <!-- 4. 卡片网格 -->
        <section class="mb-12">
            <h2 class="section-title">卡片网格</h2>
            <p class="section-description">适合展示产品、文章或服务信息的卡片式网格</p>
            <div class="grid-container grid-card">
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-rocket text-4xl text-blue-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">快速启动</h3>
                        <p class="text-gray-600">立即开始您的项目，享受高效的开发体验</p>
                    </div>
                </div>
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-palette text-4xl text-green-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">创意设计</h3>
                        <p class="text-gray-600">丰富的设计工具，让创意无限可能</p>
                    </div>
                </div>
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-cogs text-4xl text-purple-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">灵活配置</h3>
                        <p class="text-gray-600">高度可定制的配置选项，满足各种需求</p>
                    </div>
                </div>
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-shield-alt text-4xl text-red-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">安全可靠</h3>
                        <p class="text-gray-600">企业级安全保障，数据安全无忧</p>
                    </div>
                </div>
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-users text-4xl text-yellow-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">团队协作</h3>
                        <p class="text-gray-600">强大的协作功能，提升团队效率</p>
                    </div>
                </div>
                <div class="card">
                    <div class="text-center">
                        <i class="fas fa-chart-line text-4xl text-indigo-500 mb-4"></i>
                        <h3 class="text-xl font-bold text-gray-800 mb-2">数据分析</h3>
                        <p class="text-gray-600">深度数据分析，洞察业务趋势</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 5. 瀑布流网格 -->
        <section class="mb-12">
            <h2 class="section-title">瀑布流网格</h2>
            <p class="section-description">使用grid-auto-flow: dense实现类似瀑布流的布局效果</p>
            <div class="grid-container grid-masonry">
                <div class="masonry-item">A</div>
                <div class="masonry-item tall">B<br>Tall</div>
                <div class="masonry-item">C</div>
                <div class="masonry-item wide">D<br>Wide</div>
                <div class="masonry-item">E</div>
                <div class="masonry-item large">F<br>Large</div>
                <div class="masonry-item">G</div>
                <div class="masonry-item tall">H<br>Tall</div>
                <div class="masonry-item">I</div>
                <div class="masonry-item wide">J<br>Wide</div>
                <div class="masonry-item">K</div>
                <div class="masonry-item">L</div>
            </div>
        </section>

        <!-- 6. 英雄区域网格 -->
        <section class="mb-12">
            <h2 class="section-title">英雄区域网格</h2>
            <p class="section-description">使用grid-area创建复杂的布局，适合展示主要内容</p>
            <div class="grid-container grid-hero">
                <div class="hero-item hero-main">主要内容区域</div>
                <div class="hero-item">侧边栏 1</div>
                <div class="hero-item">侧边栏 2</div>
                <div class="hero-item hero-side">底部横幅</div>
            </div>
        </section>

        <!-- 7. 嵌套网格 -->
        <section class="mb-12">
            <h2 class="section-title">嵌套网格</h2>
            <p class="section-description">在网格项内部再创建网格，实现复杂的布局结构</p>
            <div class="grid-container" style="grid-template-columns: 1fr 1fr; gap: 2rem;">
                <div class="card">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">左侧嵌套网格</h3>
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem;">
                        <div class="grid-item" style="height: 80px; font-size: 0.9rem;">子项 1</div>
                        <div class="grid-item" style="height: 80px; font-size: 0.9rem;">子项 2</div>
                        <div class="grid-item" style="height: 80px; font-size: 0.9rem;">子项 3</div>
                        <div class="grid-item" style="height: 80px; font-size: 0.9rem;">子项 4</div>
                    </div>
                </div>
                <div class="card">
                    <h3 class="text-lg font-bold text-gray-800 mb-4">右侧嵌套网格</h3>
                    <div style="display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 60px); gap: 0.5rem;">
                        <div class="grid-item" style="font-size: 0.9rem;">行 1</div>
                        <div class="grid-item" style="font-size: 0.9rem;">行 2</div>
                        <div class="grid-item" style="font-size: 0.9rem;">行 3</div>
                        <div class="grid-item" style="font-size: 0.9rem;">行 4</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 8. 网格模板区域 -->
        <section class="mb-12">
            <h2 class="section-title">网格模板区域</h2>
            <p class="section-description">使用grid-template-areas创建语义化的布局结构</p>
            <div class="grid-container" style="
                grid-template-columns: 1fr 2fr 1fr;
                grid-template-rows: 100px 200px 100px;
                grid-template-areas: 
                    'header header header'
                    'sidebar main aside'
                    'footer footer footer';
                gap: 1rem;
            ">
                <div class="grid-item" style="grid-area: header; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    页头 (Header)
                </div>
                <div class="grid-item" style="grid-area: sidebar; background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);">
                    侧边栏 (Sidebar)
                </div>
                <div class="grid-item" style="grid-area: main; background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);">
                    主要内容 (Main)
                </div>
                <div class="grid-item" style="grid-area: aside; background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);">
                    侧边栏 (Aside)
                </div>
                <div class="grid-item" style="grid-area: footer; background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);">
                    页脚 (Footer)
                </div>
            </div>
        </section>
    </div>

    <!-- 页面底部 -->
    <footer class="bg-white border-t mt-12">
        <div class="max-w-7xl mx-auto px-4 py-8">
            <div class="text-center text-gray-600">
                <p class="mb-2">
                    <i class="fas fa-code text-blue-500 mr-2"></i>
                    CSS Grid 布局示例
                </p>
                <p class="text-sm">
                    展示了现代CSS Grid布局的各种应用场景和实现方式
                </p>
            </div>
        </div>
    </footer>

    <script>
        // 添加一些交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为网格项添加点击效果
            const gridItems = document.querySelectorAll('.grid-item, .masonry-item, .hero-item');
            gridItems.forEach(item => {
                item.addEventListener('click', function() {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 150);
                });
            });

            // 为卡片添加点击效果
            const cards = document.querySelectorAll('.card');
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    this.style.transform = 'scale(0.98)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 150);
                });
            });

            // 添加键盘导航
            document.addEventListener('keydown', function(e) {
                if (e.key === 'Escape') {
                    // 重置所有变换
                    const allItems = document.querySelectorAll('.grid-item, .masonry-item, .hero-item, .card');
                    allItems.forEach(item => {
                        item.style.transform = '';
                    });
                }
            });
        });
    </script>
</body>
</html> 